let tree;
let template = `
	<div v-for="(node,index) in tree">
		<div class="node" v-if="node.type!='dir'">
      <div class="node-detail node-art" :class="{'node-art-large':index===curIndex}" @mouseenter="changeIdx(index)" @mouseleave="changeIdx(-1)">
				<h3>{{node.name}}</h3>
        <div class="node-preview" v-if="node.preview" v-html="node.preview" :class="{'node-preview-large':index===curIndex}">
        </div>
				<div>
					<img :src='node.img' alt v-if='node.img'>
					<a :href="node.url" v-if='node.url'>Link</a>
				</div>
			</div>
		</div>
    <div class="node" v-else>
      <div class="node-detail node-dir" @click="showDir(prefix,index)">
        <h3>{{node.name}}</h3>
      </div>
    </div>
		<div class="subtree" hidden :id="prefix+'-'+index"></div>
	</div>
`;
jQuery(document).ready(()=>{
  jQuery.get('tree.json',
    (data)=>{
      if(data['code']=='0'){
        tree=data['tree'];
        jQuery('#main').html('<div id="t">'+template+'</div>');
        prase_tree(tree,'t');
      }
    }
  );
});
function showDir(prefix,index){
	let id=prefix+'-'+index;
	if(jQuery('#'+id).is(":hidden")){
	    jQuery('#'+id).show();
	}else{
	    jQuery('#'+id).hide();
	}
	path=id.split('-');
	let tree_part=tree;
	path.forEach((item)=>{
		if(item=='t')
			return true;
		if(Object.prototype.toString.call(tree_part)==='[object Object]')
			tree_part=tree_part['dir'];
		else
			tree_part=tree_part[item]['dir'];
		
	});
	jQuery('#'+id).html(template);
	prase_tree(tree_part,id);
}
function prase_tree(tree,id){
    new Vue({
        el: '#'+id,
        data: {
          tree: tree,
			    prefix: id,
          curIndex: -1
        },
        methods:{
          async showDir(prefix,index){
				    showDir(prefix,index);
          },
          changeIdx(idx){
            this.curIndex=idx;
          }
        }
    })
}